<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Column Resize Test</title>
    <style>
        .test-container {
            padding: 20px;
        }
        .test-header {
            position: relative;
            display: flex;
            align-items: center;
            background: #f0f0f0;
            height: 40px;
            padding: 0 16px;
            border: 1px solid #d0d0d0;
            user-select: none;
        }
        .column-title {
            flex: 1;
            padding-right: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .resize-handle {
            position: absolute;
            right: 0px;
            top: 25%;
            width: 3px;
            height: 50%;
            background-color: #d0d0d0;
            cursor: col-resize;
            z-index: 1000;
            border-radius: 2px;
            opacity: 0.6;
            transition: all 0.2s ease;
        }
        .resize-handle:hover {
            background-color: #18a058;
            opacity: 1;
            width: 4px;
        }
        .test-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            border: 1px solid #d0d0d0;
        }
        .test-th {
            position: relative;
            background: #f0f0f0;
            height: 40px;
            border-right: 1px solid #d0d0d0;
            overflow: visible;
        }
        .test-th:last-child {
            border-right: none;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h2>Column Resize Handle Test</h2>
        <p>Hover over the right edge of each column header to see the resize handles:</p>
        
        <table class="test-table">
            <thead>
                <tr>
                    <th class="test-th" style="width: 200px;">
                        <div class="test-header">
                            <span class="column-title">Column 1</span>
                            <div class="resize-handle"></div>
                        </div>
                    </th>
                    <th class="test-th" style="width: 150px;">
                        <div class="test-header">
                            <span class="column-title">Column 2</span>
                            <div class="resize-handle"></div>
                        </div>
                    </th>
                    <th class="test-th" style="width: 100px;">
                        <div class="test-header">
                            <span class="column-title">Column 3</span>
                            <div class="resize-handle"></div>
                        </div>
                    </th>
                    <th class="test-th" style="width: 180px;">
                        <div class="test-header">
                            <span class="column-title">Final Column (No Handle)</span>
                        </div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="padding: 8px; border-right: 1px solid #d0d0d0;">Sample Data 1</td>
                    <td style="padding: 8px; border-right: 1px solid #d0d0d0;">Data 2</td>
                    <td style="padding: 8px; border-right: 1px solid #d0d0d0;">Data 3</td>
                    <td style="padding: 8px;">Final Data</td>
                </tr>
                <tr>
                    <td style="padding: 8px; border-right: 1px solid #d0d0d0;">More Data 1</td>
                    <td style="padding: 8px; border-right: 1px solid #d0d0d0;">More 2</td>
                    <td style="padding: 8px; border-right: 1px solid #d0d0d0;">More 3</td>
                    <td style="padding: 8px;">More Final</td>
                </tr>
            </tbody>
        </table>
        
        <h3>Expected Behavior:</h3>
        <ul>
            <li>Gray vertical bars (3px wide) should be visible at the right edge of first 3 columns</li>
            <li>When hovering over a bar, it should turn green and become 4px wide</li>
            <li>The cursor should change to 'col-resize' when over the bars</li>
            <li>The final column should have no resize handle</li>
        </ul>
        
        <h3>Implementation Details:</h3>
        <p>The current implementation uses:</p>
        <ul>
            <li>Always-visible resize handles (no CSS hover states)</li>
            <li>JavaScript-controlled hover effects via onMouseenter/onMouseleave</li>
            <li>Absolute positioning within relative header containers</li>
            <li>Z-index 1000 to ensure handles stay on top</li>
        </ul>
    </div>
    
    <script>
        // Simulate the Vue render function behavior
        const handles = document.querySelectorAll('.resize-handle');
        handles.forEach((handle, index) => {
            handle.addEventListener('mouseenter', function() {
                this.style.backgroundColor = '#18a058';
                this.style.opacity = '1';
                this.style.width = '4px';
                console.log('Mouse entered handle', index + 1);
            });
            
            handle.addEventListener('mouseleave', function() {
                this.style.backgroundColor = '#d0d0d0';
                this.style.opacity = '0.6';
                this.style.width = '3px';
                console.log('Mouse left handle', index + 1);
            });
            
            handle.addEventListener('mousedown', function() {
                console.log('Started resizing column', index + 1);
            });
        });
    </script>
</body>
</html>